<template>
  <!-- 支付方式 自定义组件 -->
	<view class="paytype-window" :class="showt?'':'hidden-window'">
		<view class="payment" :class="shows?'on':''">
			<view class="title acea-row row-center-wrapper">选择付款方式<text class="iconfont icon-guanbi" @click="close"></text></view>
			<view class="item acea-row row-between-wrapper"  @click="change('weixin')">
				<view class="left acea-row row-between-wrapper">
					<view class="iconfont icon-weixinzhifu"></view>
					<view class="text">
						<view class="name">微信支付</view>
						<view class="info">微信快捷支付</view>
					</view>
				</view>
				<view class="iconfont icon-complete" v-if="type=='weixin'&&showIcon"></view>
			</view>
			<view class="item acea-row row-between-wrapper" @click="change('yue')">
				<view class="left acea-row row-between-wrapper">
					<view class="iconfont icon-yuezhifu"></view>
					<view class="text">
						<view class="name">余额支付</view>
						<view class="info">可用余额:<text class="money">￥{{now_money}}</text></view>
					</view>
				</view>
				<view class="iconfont icon-complete" v-if="type=='yue'&&showIcon"></view>
			</view>
		</view>
		<view class="mask" @click="close"></view>
	</view>
</template>

<script> 
	const app = getApp();
	import {checkLogin} from "@/api/user.js";
	export default{
		props:{
			show:{
				type:Boolean,
				default:false
			},
			payType:{
				type:String
			},
			showIcon:{
				type:Boolean,
				default:true
			}
		},
		watch:{
			show:function(e){
				if(e){
					this.showt = e
					this.shows = e
				}else{
					this.shows = e
					setTimeout(()=>{this.showt = e},300)
				}
			}
		},
		data(){
			return{
				now_money:0, // 余额
				shows:false,
				showt:false,
				type:""
			}
		},
		created() {
			let type = this.payType;
			this.init()
			this.setType(type)
		},
		methods:{
			init:function(){
				this.getYue()
			},
			getYue:function(){
				const that = this;
				checkLogin().then(o=>{
					that.now_money = app.globalData.userInfo.now_money
				})
			},
			setType:function(type){
				this.type = type
			},
			change:function(type){
				this.type = type
				this.$emit("changeType",type)
				this.close()
			},
			close:function(){
				this.$emit("close")
			}
		}
	}
</script>

<style>
	.paytype-window.hidden-window{
		opacity: 0;
		z-index: -1;
		position: relative;
	}
	.paytype-window .payment{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		border-radius: 16rpx 16rpx 0 0;
		background-color: #fff;
		padding-bottom: 60rpx;
		z-index: 99;
		-webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
		transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}
	.paytype-window .payment.on{
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	.paytype-window .payment .title{
		text-align: center;
		height: 123rpx;
		font-size: 32rpx;
		color: #282828;
		font-weight: bold;
		padding-right: 30rpx;
		margin-left: 30rpx;
		position: relative;
		border-bottom: 1rpx solid #eee;
	}
	.paytype-window .payment .title .iconfont{
		position: absolute;
		right: 30rpx;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		font-size: 43rpx;
		color: #8a8a8a;
		font-weight: normal;
	}
	.paytype-window .payment .item{
		border-bottom: 1rpx solid #eee;
		height: 130rpx;
		margin-left: 30rpx;
		padding-right: 30rpx;
	}
	.paytype-window .payment .item .icon-complete{
		color: #09bb07;
	}
	.paytype-window .payment .item .left{
		width: 610rpx;
	}
	.paytype-window .payment .item .left .iconfont{
		font-size: 45rpx;
		color: #09bb07;
	}
	.paytype-window .payment .item .left .icon-yuezhifu{
		color: #ff9900;
	}
	.paytype-window .payment .item .left .text{
		width: 540rpx;
	}
	.paytype-window .payment .item .left .text .name{
		font-size: 32rpx;
		color: #282828;
	}
	.paytype-window .payment .item .left .text .info{
		font-size: 24rpx;
		color: #999;
	}
	.paytype-window .payment .item .left .text .info .money{
		color: #ff9900;
	}
	.paytype-window .mask{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		opacity: .5;
		z-index: 5;
	}
</style>
